


<style type="text/css">
    .mine-order-wrap{
        background:#fff;
        height:100vh;
        font-size:.7rem;
    }
    .mine-order-top{
        width:100%;
        display:flex;
        height:2.5rem;
        align-items: center;
        padding:0 .5rem;
    }
    .mine-order-top img{
        width:.7rem;
    }
    .mine-order-top h3{
        display:flex;
        flex:1;
        justify-content: center;
    }
    .mine-order-ul{
        display:flex;
        justify-content: space-between;
        border-bottom: 1px solid #333;
        color: #333;
        width:100%;
        height:2rem;
        font-size: .8rem;
        padding-top:.3rem;
    }
    .mine-order-li{
        flex:1;
        text-align: center;
        font-weight: 700;
        color:#333;
    }
    .mine-mycook-img{
        background:url("public/img/nogoods.png") no-repeat center ;
        background-size: 6rem;
        width:100%;
        padding-top: 7rem;
        text-align: center;
    }
    .mine-mycook-img h3{
        padding:.3rem 0;
        text-align: center;
    }
    .mine-mycook-img p{
        padding-bottom: .5rem;
    }
     .mine-mycook-img a{
            border:1px solid #F5843A;
        font-weight: 700;

            padding:.2rem .4rem;
     }
    
     .mine-myorder-list{
        width:100%;
        margin-bottom: 2.5rem;
        background:#fff;
     }
     .mine-order-li:hover{
        border-bottom:5px solid #F5843A;
     }
     .myorder-list-ul{
        background:#fff;
     }
     .myorder-list-li{
        background:#f7f7f7;
        height:3.6rem;
        margin-bottom: .1rem;
        display:flex;
        justify-content: space-between;
     }
     .myorder-list-li .myorder-pic img{
        width:2.5rem;
     }
     .myorder-pic{
        width:3.6rem;
        height:3.6rem;
        padding:.8rem .8rem 0 0;

     }
      .myorder-list-li .myorder-goodsname{
        color: #565656;
        flex:1;
        font-size:.7rem;
        padding:.8rem 0 1rem 0;
      }
        .myorder-price{
            padding:.8rem .3rem 0 0;
        }
        .myorder-price p:last-of-type{
            text-align: right;
        }
        .myorder-count{
            text-align: right;
            padding:.5rem .4rem 0.5rem 0;
            border-bottom: 2px solid #e0e0e0;

        }
        .myorder-count span:last-of-type{
            font-size: .8rem;
            font-weight: 700;

        }
</style>
<div class="mine-order-wrap" ng-controller="myOrderController">
    <div class="mine-order-top">
<a href="javascript:history.go(-1)"><img src="public/img/back.gif" alt="" /></a>
<h3>我的订单</h3>
        
    </div>
    <ul class="mine-order-ul">
        <li class="mine-order-li" ng-click="toggle()">全部</li>
        <li class="mine-order-li" ng-click="toggle()">待付款</li>
        <li class="mine-order-li" ng-click="toggle()">待收货</li>
        <li class="mine-order-li" ng-click="toggle()" >待评价</li>
    </ul>
    
    <div class="mine-mycook-img" ng-hide="toggle()">
        <h3>您还没有相关订单</h3>
        <p>可以看看那些想买的</p>
        <a ui-sref="home">随便逛逛</a>
    </div>  
      <div class="mine-myorder-list" ng-show="toggle()">
            <h3 class="myorder-ordernum">{{order.sn}}</h3>
        <ul class="myorder-list-ul">
            <li ng-repeat="order in itemsArr track by $index"  class="myorder-list-li">
                <div class="myorder-pic"><img ng-src="{{order.picUrl}}" alt="" /></div>
                <h3 class="myorder-goodsname">{{order.goodsName}}</h3>
               <div class="myorder-price">
                <p>{{"￥"+order.price}}</p>
                <p>{{"x"+order.cnt}}</p>
                </div>
            </li>
           
        </ul>
        <p class="myorder-count">
            <span>{{"共计"+countAll()+"件商品"}}</span>
            <span>{{"订单价金额:￥"+moneyAll()}}</span>
        </p>
    </div>
</div>

